<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
  <th:block th:include="include :: header('代码预览')"/>
  <th:block th:include="include :: codemirror"/>
  <!-- 引入css文件，用以支持主题 -->
  <link rel="stylesheet" th:href="@{'/ajax/libs/codemirror/theme/' + ${@config.getKey('gen_preview_theme')} + '.css'}"/>
  <link th:href="@{/ajax/libs/layui/css/layui.css?v=2.5.6}" rel="stylesheet"/>
</head>
<body class="white-bg">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
  <div class="layui-btn-container" style="margin: 0 20px;">
    <button type="button" th:each="code,state:${previewCode}" class="layui-btn"
            th:onclick="setEditorValue([[${code.key}]])">[[${code.key}]]
    </button>
  </div>
  <div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <textarea id="editor"></textarea>
  </div>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
  var codeMap = [[${previewCode}]];
  var previewTheme = [[${@config.getKey('gen_preview_theme')}]];
  var editor;

  $(function () {
    // 根据DOM元素的id构造出一个编辑器
    editor = CodeMirror.fromTextArea(document.getElementById("editor"), {
      lineNumbers: true,     // 显示行数
      styleActiveLine: true, // 当前行背景高亮
      matchBrackets: true,   // 括号匹配
      mode: {name: "xml", alignCDATA: true},
      mode: {name: "html5", alignCDATA: true},
      mode: {name: "javadoc", alignCDATA: true},
      mode: {name: "java", alignCDATA: true},
      mode: {name: "javascript", alignCDATA: true},
      lineWrapping: false,   // 自动换行默认true
      foldGutter: true,      // 支持代码折叠
      theme: previewTheme,	 // 设置主题
      readOnly: true         // 只读模式
    })
    // 设置需要初始化的代码内容
    editor.setValue(codeMap["domain.java"]);
    editor.setSize('100%', '100%');
  })

  function setEditorValue(index) {
    editor.setValue(codeMap[index]);
  }
</script>
</body>
</html>